<template>
  <div class="table-wrapper">
    <h3 id="case-table-title">测试用例显示{{ roy }}</h3>
    <button class="add-case-button" @click="handleOpenAdder">新增用例</button>
    <table id="caseTable" border="2" bgcolor="#add8e6" align="center">
      <col v-for="i in 5" :key="i" style="width: 100px" />
      <thead>
        <tr>
          <th v-for="(desp, key, index) in keyDescription" :key="key">
            {{ desp }}{{ index }}
          </th>
        </tr>
      </thead>
      <tbody>
        <CaseRow
          v-for="caserow in caseList"
          :key="caserow.id"
          :mycase="caserow"
          @deleteRow="handleDeleteTable(caserow as SunnyCaseEdit)"
        ></CaseRow>
      </tbody>
    </table>
  </div>
</template>

<script lang="ts" setup>
import {
  reactive,
  ref,
  inject,
  onMounted,
  onUnmounted,
  onUpdated,
  type Ref,
} from "vue";
import CaseRow from "./CaseRow.vue";
import type {
  CaseShow,
  SunnyCase,
  SunnyCaseEdit,
} from "@/types/sunnyCase/types";
//数据内容

const props = defineProps<{
  caseList: SunnyCase[];
}>();

const newCase: Ref<CaseShow> = ref({
  caseName: "用例名",
  stepName: "步骤名",
  keywords: "关键字",
  param1: "参数一",
  param2: "参数二",
});
const roy = inject("roy");
//表头结构
let keyDescription: CaseShow = reactive({
  caseName: "用例名",
  stepName: "步骤名",
  keywords: "关键字",
  param1: "参数一",
  param2: "参数二",
});

onMounted(() => {
  console.log("Table挂载啦");
});
onUnmounted(() => {});
onUpdated(() => {
  console.log("Table更新啦");
  console.log(props.caseList[0].caseName);
});

const emit = defineEmits(["caseTableDelete", "caseTableChange", "openAdder"]);

function handleOpenAdder() {
  emit("openAdder");
}

//触发main中的删除动作的方法
function handleDeleteTable(mycase: SunnyCaseEdit): string {
  emit("caseTableDelete", mycase);
  return "rou";
}

const handleRoy: () => void = () => {};
</script>

<style scoped></style>
